<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<html:header title="借出归还单详情">

    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style type="text/css">
        a{
            color: #01AAED;
            text-decoration: none;
            font-size: 12px;
        }
        a:hover {
            color: #FF5722;
        }

        .snListDiv {
            margin:10px;
            width: 100%;
            text-align: left;
            color: #393D49;
        }

        .snListDiv li{
            padding:10px 20px;
            border-bottom:1px  #aaaaaa dashed;
        }

        .layui-table-cell {            overflow: visible !important;        }
    </style>

    <script>
        jQuery(function () {
            ajaxSelect("${baseUrl}settAccount/settAccount/listVo.action","settAccountId");
            $("#cancel").click(function () {
                closeSubIframe();
            });

        });

        layui.use(['form', 'table', 'laydate','laytpl'], function () {
            let $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                laydate = layui.laydate,
                laytpl = layui.laytpl,
                util = layui.util;


            get("${baseUrl}house/borrowOutBack/getVoById.action?id=${id}", function (res) {
                if (res.code == 1) {
                    $("#print").click(function () {
                        document.getElementById("printFrame").contentWindow.printPage(res.data);
                    });

                    formSetVal("form", res.data);

                    $("#no").html(res.data.no);
                    $("#custom").html(res.data.custom.name);
                    $("#house").html(res.data.houseVo.store.name + ">" + res.data.houseVo.name);
                    $("#user").html(res.data.user.name);
                    $("#date").html(GMTToDate(res.data.date));

                    $("#remark").html(res.data.remark);

                    $("#makeUser").html(res.data.makeUser.name);
                    $("#makeTime").html(res.data.makeTime);

                    let list=[];
                    $.each(res.data.borrowOutBackGoodsVoList, function (i,d) {
                        let vo = d.goodsVo;
                        vo.goodsId = d.goodsId;
                        vo.number = d.number;
                        vo.price = d.price;
                        vo.unitId = d.unitId;
                        vo.amount = d.amount;
                        vo.remark = d.remark;
                        list.push(vo);
                    });
                    renderTable(list);
                }else {
                    tip("获取订单信息失败");
                }
            });
        });

        function renderTable(list) {
            layui.table.render({
                id: 'table',
                elem: '#table',
                data: list,
                totalRow:true,
                text: {
                    none: '无' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                },
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', minWidth: 140, title: '名称/规格',style:"font-size:12px;",templet:function (d) {
                            return genGoodsName(d.name,d.norms)
                        }},
                    {field: 'no', width: 140, title: '商品编号', style: "font-size:12px;"},
                    {width: 120, title: '属性', style: "font-size:12px;", templet: function (d) {
                            return genAttr(d.attrNameVoList);
                        }},
                    {field:'number', width: 110, title: '数量',templet: "#numberBar"},
                    {field:'snNumber', width: 110, title: '序列号',templet: "#snNumberBar"},
                    {width: 120, title: '单位', style: "font-size:12px;", templet: function (d) {
                            return d.goodsId==null ? "": genUnitName(d.goodsUnitVoList,d.unitId);
                        }},
                    {field: 'remark', width: 120, title: '备注', style: "font-size:12px;"},

                ]],
                limit: Number.MAX_VALUE,
                done: function (res, curr, count) {
                    processTotalRow();

                    $(".snNumberDiv").unbind().bind('click',function () {
                        let index = $(this).parents('tr').data('index');
                        let tableData = layui.table.cache.table;
                        showSnList(tableData[index].name, tableData[index].goodsSnList);
                    });
                }
            });
        }



        function processTotalRow() {
            let number = 0;
            $.each(layui.table.cache.table, function (i,d) {
                number += parseInt(d.number);
            });
            setTotalRow("number",number);
            setTotalRow("0","合计");
        }
    </script>

</html:header>

<iframe id="printFrame" style="width:0px;height:0px" src="${baseUrl}print/borrowOutBackPrint.action" frameborder="0"></iframe>
<body>

<div class="layui-inline" style="padding-bottom: 20px;">
    <button class="layui-btn" id="print">打印</button>
    <button class="layui-btn layui-btn-primary" id="cancel">关闭</button>
</div>

<div class="layuimini-container">
    <div class="layuimini-main">
        <html:closeOrderImage/>

        <form class="layui-form" action="" lay-filter="form">
            <input type="hidden" name="id" value="${id}">


            <h2 class="tableBeforeTitle">借出归还单</h2>
            <div style="height: 4px;background-color: #bbbbbb;width: 100%;margin: 20px 0 2px 0;"></div>
            <div style="height: 1px;width: 100%;background-color: #dddddd;margin-bottom: 10px;"></div>
            <div style="height: 10px;"></div>

            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">编号：</span>
                    <span id="no" name="no"></span>
                </div>
            </div>


            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">客户：</span>
                    <span id="custom"></span>
                </div>
            </div>


            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">仓库：</span>
                    <span id="house"></span>
                </div>
            </div>

            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">经手人：</span>
                    <span id="user"></span>
                </div>
            </div>

            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">业务日期：</span>
                    <span id="date"></span>
                </div>
            </div>


            <div style="height: 20px;"></div>
            <table class="layui-hide" id="table" lay-filter="table" lay-size="sm"></table>


            <div style='overflow:auto;margin: -10px 0 0 0;'>
                <table class="layui-table">
                    <tbody>
                    <tr>
                        <td>
                            <span style="color: #aaaaaa;padding-left: 20px;">备注：</span><span id="remark"></span>
                        </td>

                    </tr>
                    </tbody>
                </table>
            </div>

            <hr>

            <span style="color: #aaaaaa;">制单人：</span><span id="makeUser"></span>
            <span style="color: #aaaaaa;padding-left: 20px;">制单时间：</span><span id="makeTime"></span>
        </form>
    </div>

    <script type="text/html" id="amountBar" >
        {{ getPrice(d.amount) }}
    </script>
    <script type="text/html" id="numberBar" >
        <div class="numberDiv">
            <span class="number">{{ getNumber(d.number) }}</span>
            {{# if(d.sn==true){ }}
            <span class="numberSn">sn</span>
            {{# } }}
        </div>
    </script>

    <script type="text/html" id="snNumberBar" >
        {{# if(d.sn==true){ }}
        {{# if(d.goodsSnList!=undefined && d.goodsSnList.length > 0){ }}
        <div class="snNumberDiv">{{d.goodsSnList.length}}个</div>
        {{# } }}
        {{# } }}
    </script>
</div>

</body>


<html:snListDialog/>

<html:loading/>
</html>